<template>
	<view class="container">
		<!-- 支付金额 -->
		<view style="display: flex;flex-direction: row;justify-content: center;padding: 100rpx 0;border-bottom: 2rpx solid #eee;font-weight: bold;font-size: 46rpx;">¥{{realPay}}元</view>
		<!-- 支付方式 -->
		<view class="payWay">
			<view class="jifen">
				<text>积分支付（可用{{userInfo.incomes}}）</text>
				<u-switch activeColor='#d4a781' v-model="isIncomes" @change="paywayChange('isIncomes')"></u-switch>
			</view>
			<view style="margin-left: 26rpx;color: #d4a781;font-size: 24rpx;margin-bottom: 10rpx;">提示：资产和微信支付不可叠加使用！</view>
		</view>
		<view style="background-color: #FFF;display: flex;flex-direction: row;align-items: center;justify-content: space-between;padding: 30rpx;border-top: 1px solid #EFEFEF;">
			<view style="display: flex;flex-direction: row;align-items: center;">
				<image style="width: 50rpx;height: 50rpx;margin-right: 20rpx;" src="/static/common/pay/luggage-pay-wechat.png"></image>
				<text>微信支付</text>
			</view>
			<u-switch activeColor='#d4a781' v-model="isWxpay" @change="paywayChange('isWxpay')"></u-switch>
		</view>
		<view class="footer">
			<jc-button :width='600' @click='confirm' backgroundColor='#FC5E53' :circle='true' title="确认付款"></jc-button>
		</view>
	</view>
</template>

<script>
	import { common } from '@/api/common.js'
	import {user} from '@/api/user.js'
	import {wxminiproPay} from '@/common/utils/wxminiproPay.js'
	export default{
		components: {},
		data() {
			return {
				isIncomes: false, //是否使用积分
				isWxpay: true,
				isBalance: false,
				userInfo: {},
				realPay: 0
			}
		},
		onLoad() {
			if(this.$Route.query){
				this.realPay = this.$Route.query.realPay
			}
			this.getUserInfo()
		},
		methods:{
			//选择支付方式
			paywayChange(e){
				console.log("选择支付方式", e)
				// this.currentPayway = index
				
				switch (e){
					case 'isWxpay':
						this.isBalance = false
						this.isIncomes = false
						this.isWxpay = true
						break;
					case 'isIncomes':
						this.isBalance = false
						this.isGolds = false
						this.isWxpay = false
						break;
					case 'isBalance':
						this.isIncomes = false
						this.isWxpay = false
						this.isBalance = true
						break;
					default:
						break;
				}
			},
			getDataList() {
				common.operateActionGet('/merchant/shop/', {}).then(res => {
					if (res.data.code == 10000) {
						
					}
				})
			},
			confirm(){
				var params = {}
				if(this.isIncomes){
					params.payway = 'incomes'
				}else if(this.isBalance){
					params.payway = 'balance'
				}else if(this.isWxpay){
					params.payway = 'wxpay'
				}else{
					this.$show.showMessage('请选择支付方式')
					return
				}
				// 组合参数
				if (this.$Route.query){
					params = Object.assign(params, this.$Route.query)
				}
				switch (params.payway){
					case 'incomes':
						var _this = this
						uni.showModal({
							content: '本次支付将消耗'+params.realPay + '资产',
							confirmText: '确定',
							cancelText: '取消',
							complete(_res) {
								if(_res.confirm){
									_this.wxminiproPay(params)
								}
							}
						})
						break;
					case 'wxpay':
						this.wxminiproPay(params)
					default:
						break;
				}
			},
			wxminiproPay(params){
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				wxminiproPay(params).then(res => {
					uni.hideLoading()
					uni.showModal({
						content: '支付成功',
						confirmText: '确定',
						showCancel: false,
						complete(_res) {
							if(_res.confirm){
								uni.reLaunch({
									url: '/pages/home/home'
								})
							}
						}
					})
				})
			},
			getUserInfo() {
				user.getUserInfo().then(res => {
					if (res.data.code == 10000) {
						this.userInfo = res.data.data
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.container{
		background-color: #FFF;
		height: 100vh;
	}
	.payWay{
		display: flex;
		flex-direction: column;
		margin-top: 10rpx;
		background-color: #FFFFFF;
		.jifen{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 30rpx 30rpx;
			text-align: right;
		}
		.totalPrice{
			padding: 40rpx;
			text-align: right;
			background-color: #FFFFFF;
			text:nth-of-type(2){
				color: #FC5E53;
				font-size: 34rpx;
				font-weight: bold;
			}
			text:nth-of-type(3){
				font-size: 24rpx;
			}
		}
	}
	.footer{
		margin-top: 200rpx;
	}
</style>
